<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="王超凡">
    <title></title>
    <style>
		
		#time{
			margin: 0 auto;
			width: 300px;
			height: 50px;
			line-height: 50px;
			padding: 5px;
			text-align: center;
			color: white;
			background-color: gray;
		}
		span{
			width: 50px;
			height: 50px;
			display: inline-block;
			padding: 0 10px;
			margin: 0 10px;
			background-color: white;
			color: black;
		}
        
    </style>
</head>
<body>
    <div id="time">
		<p><span>00</span>时<span>00</span>分<span>00</span>秒</p>
    </div>
</body>
</html>
<script>
	setInterval(updateTime, 1000);
    updateTime();
    function updateTime() {
        // 获取当前时间
        var now = new Date();
        // 获取小时
        var hour = now.getHours();
        // 获取分钟数
        var minute = now.getMinutes();
        // 获取秒数
        var second = now.getSeconds();

        hour = hour < 10 ? '0' + hour : hour;
        minute = minute < 10 ? '0' + minute : minute;
        second = second < 10 ? '0' + second : second;

        // 将获取到的小时，分钟，秒插入到id为time的标签中
        document.getElementById('time').innerHTML = hour + ':' + minute + ':' + second
	}
    // var spans = document.querySelectorAll('span');
	// getTimes();
	// setInterval(getTimes,1000);
	// function getTimes () {
	// 	var now = new Date();
	// 	var date = [now.getHours(),now.getMinutes(),now.getSeconds()];
	// 	for (var i = 0; i < spans.length; i++) {
	// 		spans[i].innerHTML = formatTime(date[i])
	// 	}
	// }
	
	// function formatTime (a) {
	// 	// ^(\d)$就是0-9的任意一个数字，^表示以...开头，\d表示0-9的数字，$表示以...结尾，所以这个就是表示单个数字了
	// 	// 正则表达式，选择替换
	// 	// 如果是一位数字，则在前面加上0，返回该字符串
	// 	return a.toString().replace(/^(\d)$/,'0$1');

	// 	// 或者 
	// 	// a<10 ? '0'+a : a;
	// }
</script>